<script setup>

</script>

<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header style="height: 200px;border-bottom:2px solid #e1e1de">
          <el-row>
            <el-col :span="6">
              <img src="../assets/相机.png" alt="头像"
                   style="width: 110px;
                          height: 110px;
                          margin-top: 45px;
                          margin-left: 45px;
                          background-color: #54efdd;
                          border-radius: 50%;
                          ">
            </el-col>
            <el-col :span="18">
              <p style="margin-top: 45px;font-size: 30px">uname</p>
              <p style="margin-top: 10px">账号：loginname</p>
              <a style="font-size: 12px" href="/user/person/information">修改个人信息</a>
            </el-col>
          </el-row>
        </el-header>
        <el-main>
          <ul class="person_ul">
            <a href="#">
              <li>
                <div style="padding-top: 26px;padding-left: 30px">
                  <i class="iconfont" style="color: #ee683f">&#xe679;</i>
                </div>
                <span>我发布的</span>
              </li>
            </a>
            <a href="#">
              <li>
                <div style="padding-top: 26px;padding-left: 30px">
                  <i class="iconfont" style="color: #1cec2d">&#xe60b;</i>
                </div>
                <span>我买到的</span>
              </li>
            </a>
            <a href="#">
              <li>
                <div style="padding-top: 26px;padding-left: 30px">
                  <i class="iconfont" style="color: #21aadc">&#xe6bd;</i>
                </div>
                <span>我卖出的</span>
              </li>
            </a>
            <a href="#">
              <li>
                <div style="padding-top: 26px;padding-left: 30px">
                  <i class="iconfont" style="color: #bd2ef6">&#xe708;</i>
                </div>
                <span>查看评论</span>
              </li>
            </a>
          </ul>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<style scoped>
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont';  /* Project id 4674015 */
  src: url('https://at.alicdn.com/t/c/font_4674015_ifd94q3kz5.woff2?t=1730634819589') format('woff2'),
  url('https://at.alicdn.com/t/c/font_4674015_ifd94q3kz5.woff?t=1730634819589') format('woff'),
  url('https://at.alicdn.com/t/c/font_4674015_ifd94q3kz5.ttf?t=1730634819589') format('truetype');
}
.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;}
.person_ul{
  width: 650px;
  height: 300px;
  margin:10px auto 5px;
  /* flex布局 */
  display: flex;
  /* 换行 */
  flex-wrap: wrap;
  /* 水平方向两端对齐 */
  justify-content: space-between;
  /* 垂直方向两端对齐 */
  align-content: space-between;
}
.person_ul li {
  width: 270px;
  height: 125px;
  background-color: #f5f5f2;
  border-radius: 15px;
  display: flex;
  justify-content: space-between;
}
.person_ul .iconfont{
  font-size: 70px;
}
.person_ul span{
  font-size: 20px;
  padding-right: 50px;
  padding-top: 45px;
  color: #343434;
}
</style>